<template>
  <div class="commonOutPage">
    <tableComponent :popoverShow="popoverShow" :defaultSort="defaultSort" :showsummary="showsummary" :columnList="columnList" :tableData="tableData" :menuList="menuList" @popoverShowBtn="popoverShowBtn" @popoverConfirm="popoverConfirm" @popoverConcle="popoverConcle" @btnClick="btnClick" @sortchange="sortchange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange"></tableComponent>
  </div>
</template>
<script type="text/ecmascript-6">
import tableComponent from './tableComponent.vue'
export default {
  name: 'tablePage',
  components: {
    tableComponent
  },
  data () {
    return {
      // 表格列设置popover的展示
      popoverShow: false,
      // 表格默认排序
      defaultSort: {
        // prop: 'age', order: 'descending'
      },
      // 合计
      showsummary: false,
      // 表格默认列
      columnList: [
        {
          // 列的类型，目前有如下类型：index序号,selection多选,normal一般展示,operation操作 必传
          type: 'index',
          // prop 必传
          prop: 'index',
          // label 必传
          label: '',
          // width 非必传
          width: '',
          // popover checkbox是否选中
          checked: false,
          // type: 'operation'时必传   按钮操作,
          buttonList: [
            {

              type: 'add',
              label: '新增'
            },
            {
              type: 'delete',
              label: '删除'
            },
            {
              type: 'detail',
              label: '查看'
            }
          ]
        },
        {
          type: 'selection',
          prop: 'selection',
          label: '',
          width: ''
        },
        {
          type: 'normal',
          prop: 'id',
          label: 'id',
          width: ''
        },
        {
          type: 'normal',
          prop: 'name',
          label: '姓名',
          width: ''
        },
        {
          type: 'normal',
          prop: 'sex',
          label: '性别',
          width: ''
        },
        {
          type: 'normal',
          prop: 'age',
          label: '年龄',
          width: ''
        },
        {
          type: 'normal',
          prop: 'birthday',
          label: '出生年月',
          width: ''
        },
        {
          type: 'normal',
          prop: 'address',
          label: '地址',
          width: ''
        },
        {
          type: 'normal',
          prop: 'phone',
          label: '联系方式',
          width: ''
        },
        {
          type: 'normal',
          prop: 'company',
          label: '所属单位',
          width: ''
        }

      ],
      tableData: [
        {
          id: 1,
          name: '王小虎',
          sex: '男',
          age: 26,
          birthday: '1992-06-26',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '126326522358',
          company: '阿里巴巴文一西路园区'
        },
        {
          id: 2,
          name: '胡夏',
          sex: '男',
          age: 30,
          birthday: '1988-06-26',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '186556642566',
          company: '支付宝黄龙大厦'
        },
        {
          id: 3,
          name: '天安',
          sex: '女',
          age: 24,
          birthday: '1994-06-26',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '13814385225',
          company: '浙江卡尔特汽车'
        }
      ],
      menuList: [
        {
          type: 'index',
          prop: 'index',
          label: '序号',
          width: '55',
          checked: true,
          disabled: true,
          sortable: false
        },
        {
          type: 'selection',
          prop: 'selection',
          label: '多选',
          width: '55',
          checked: false,
          disabled: false,
          sortable: false
        },
        {
          type: 'normal',
          prop: 'id',
          label: 'id',
          width: '',
          checked: false,
          sortable: false
        },
        {
          type: 'normal',
          prop: 'name',
          label: '姓名',
          width: '',
          checked: false,
          sortable: false
        },
        {
          type: 'normal',
          prop: 'sex',
          label: '性别',
          width: '',
          checked: false,
          sortable: false
        },
        {
          type: 'normal',
          prop: 'age',
          label: '年龄',
          width: '',
          checked: false,
          sortable: 'custom'
        },
        {
          type: 'normal',
          prop: 'birthday',
          label: '出生年月',
          width: '',
          checked: false,
          sortable: false
        },
        {
          type: 'normal',
          prop: 'address',
          label: '地址',
          width: '',
          checked: false,
          sortable: false
        },
        {
          type: 'normal',
          prop: 'phone',
          label: '联系方式',
          width: '',
          checked: false,
          sortable: false
        },
        {
          type: 'normal',
          prop: 'company',
          label: '所属单位',
          width: '',
          checked: false,
          sortable: false
        },
        {
          type: 'operation',
          prop: 'operation',
          label: '操作',
          width: '',
          checked: false,
          sortable: false,
          buttonList: [
            {
              type: 'add',
              label: '新增'
            },
            {
              type: 'delete',
              label: '删除'
            },
            {
              type: 'detail',
              label: '查看'
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 设置列的弹窗展示
    popoverShowBtn () {
      this.popoverShow = true
    },
    // 确认设置列
    popoverConfirm () {
      console.log(this.menuList)
      let arr = []
      for (let item of this.menuList) {
        if (item.checked) {
          arr.push(item)
        }
      }
      this.columnList = [...arr]
      this.popoverShow = false
      console.log(this.columnList)
    },
    // 取消设置列
    popoverConcle () {
      this.popoverShow = false
      console.log(this.menuList)
    },
    // 表格操作栏按钮事件
    btnClick (list, btnList) {
      // list 行数据  btnList 按钮属性
      console.log(list, btnList)
    },
    // 表格排序按钮 同element
    sortchange (info) {
      console.log(info)
    },
    // 表格的行点击事件
    handleCurrentChange (val) {
      console.log(val)
    },
    // 表格的多选事件
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    }
  }
}
</script>
<style lang="scss" scoped>
.tablePage {
    width: 100%;
    height: 100%;
}
</style>
